<template>
  <div class="wrap">
    <el-row class="center-list">
      <el-col :span="6" :offset="2">
        <h2 class="list">推荐歌单</h2>
      </el-col>
      <el-col :span="6" :offset="10">
        <p class="center">歌单广场</p>
      </el-col>
    </el-row>
    <el-row class="zuoyou" :gutter="10">
      <el-col class="inner" :span="8" v-for="item in length" :key="item.id" @click.native="toSongSheet(item.id)">
        <img :src="item.coverImgUrl" alt="">
        <p class="desc">{{item.name}}</p>
        <div class="pos">
          <i class="iconfont">&</i>
          <span>{{item.playCount}}</span>
        </div>
      </el-col>
    </el-row>
    <!-- 新歌新碟 -->
    <el-row class="center-list">
      <el-col :span="6" :offset="2">
        <h2 class="list">
          <span class="item" :class="{select: number == 1}" @click="changeNum1">新碟</span>
          <span class="item" :class="{select: number == 0}" @click="changeNum0">新歌</span>
        </h2>
      </el-col>
      <el-col :span="6" :offset="9">
        <p class="center" v-show="number == 1">更多新碟</p>
        <p class="center" v-show="number == 0">新歌推荐</p>
      </el-col>
    </el-row>
    <!-- 看看 -->
    <el-row :gutter="10" v-show="number == 1">
      <el-col class="inner" :span="8" v-for="item in blumsList" :key="item.id">
        <!-- // 新碟 -->
        <img :src="item.picUrl" alt="">
        <p class="desc">{{item.name}}</p>
      </el-col>
    </el-row>
    <el-row :gutter="10" v-show="number == 0">
      <el-col class="inner" :span="8" v-for="item in newSongList" :key="item.id">
        <img :src="item.picUrl" alt="">
        <p class="desc">{{item.name}}</p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      number: 1,
      list: [],
      blumsList: [], // 新碟
      newSongList: [] // 新歌
    }
  },
  computed: {
    length () {
      const arr = this.list
      arr.map((val, index) => {
        if (val.playCount > 9999) {
          val.playCount = Math.floor(val.playCount / 10000) + '万'
        }
      })
      return arr
    }
  },
  methods: {
    toSongSheet (id) {
      this.axios.get('/api/playlist/detail?id=' + id).then((res) => {
        if (res.data.code === 200) {
          const list = res.data.playlist
          this.$router.push({ name: 'song', params: { list } })
        }
      })
    },
    getmusic () {
      this.$axios.get('/api/top/playlist?limit=30').then(res => { // 没有登陆情况下，要请求的数据
        console.log(res.data)
        if (res.data.code === 200) {
          for (let i = 0; i < 6; i++) {
            const index = res.data.playlists[Math.floor(Math.random() * 30)]
            if (this.list.indexOf(index) < 0) {
              this.list.push(index)
            } else {
              i--
            }
          }
        }
      })
    },
    getblumsList () {
      this.$axios.get('/api/top/album?limit=30').then(res => { // 新碟
        console.log(res.data)
        if (res.data.code === 200) {
          for (let i = 0; i < 3; i++) {
            const dex = res.data.albums[Math.floor(Math.random() * 30)]
            if (this.blumsList.indexOf(dex) < 0) {
              this.blumsList.push(dex)
            } else {
              i--
            }
          }
        }
        // this.blumsList = res.data.albums
      })
    },
    getnewSongList () {
      this.$axios.get('/api/top/album?limit=30').then(res => { // 新歌获取
        console.log(res.data)
        if (res.data.code === 200) {
          for (let i = 0; i < 3; i++) {
            const ine = res.data.albums[Math.floor(Math.random() * 30)]
            if (this.newSongList.indexOf(ine) < 0) {
              this.newSongList.push(ine)
            } else {
              i--
            }
          }
        }
        // this.newSongList = res.data.albums
      })
    },
    changeNum0 () {
      this.number = 0
    },
    changeNum1 () {
      this.number = 1
    }
  },
  mounted () {
    this.getmusic()
    this.getblumsList()
    this.getnewSongList()
  }
}
</script>
<style lang="stylus" scoped>
.center-list
  padding .4rem 0
img
  width 100%
  height 2.28rem
.desc
  line-height 1.5
  text-align left
  display -webkit-box
  -webkit-line-clamp 2
  overflow hidden
  text-overflow ellipsis
  margin-bottom .3rem
  color #333
  font-size .24rem
.inner
  position relative
  color #ffffff
  height 3.4rem
  .pos
    position absolute
    right .2rem
    top 0
    font-size .14rem
    i
      font-size .14rem
.item
  color #333
  font-size .24rem
.select
  color #111
  font-size .32rem
.zuoyou
  margin-left: 0px !important
  margin-right: 0px !important
</style>
